<v-col class="px-0">
  <div class="text-h6 px-2">{{ label }}</div>
  <v-divider class="pt-0 mt-0" />
  <v-row class="mx-0 px-1 py-3">
    <v-col col="6" class="py-0">
      <v-select
        :key="tsKey"
        v-model="colorMode"
        :items="colorOptions"
        hide-details
        dense
      />
    </v-col>
    <v-col col="6" class="py-0">
      <v-select
        :key="tsKey"
        v-model="componentMode"
        :items="componentOptions"
        :disabled="!hasComponents"
        hide-details
        dense
      />
    </v-col>
  </v-row>

  <v-row class="mx-0 px-2 pt-1 mb-n6" v-show="colorMode === 'Solid Color'">
    <v-color-picker
      style="width: 100%"
      v-model="solidColor"
      hide-mode-switch
      canvas-height="50"
    />
  </v-row>

  <v-row class="mx-0 px-2 pt-1 justify-space-around mb-n6" v-show="colorMode !== 'Solid Color'">
    <v-btn small class="mb-3 mx-1">
      <v-icon small v-text="`$pqEditColor`" />
      Edit
    </v-btn>
    <v-btn
      style="min-width: 36px;"
      small
      class="mb-3 mx-1"
    >
      <v-icon small v-text="`$pqSeparateColorMap`" />
    </v-btn>
    <v-btn
      style="min-width: 36px;"
      small
      class="mb-3 mx-1"
      @click="trigger('pv_reaction_scalar_range_data')"
    >
      <v-icon small v-text="`$pqResetRange`" />
    </v-btn>
    <v-btn
      style="min-width: 36px;"
      small
      class="mb-3 mx-1"
    >
      <v-icon small v-text="`$pqResetRangeCustom`" />
    </v-btn>
    <v-btn
      style="min-width: 36px;"
      small
      class="mb-3 mx-1"
      @click="trigger('pv_reaction_scalar_range_time')"
    >
      <v-icon small v-text="`$pqResetRangeTemporal`" />
    </v-btn>
    <v-btn
      style="min-width: 36px;"
      small
      class="mb-3 mx-1"
    >
      <v-icon small v-text="`$pqFavorites`" />
    </v-btn>
    <v-btn
      style="min-width: 36px;"
      small
      class="mb-3 mx-1"
    >
      <v-icon small v-text="`$pqScalarBar`" />
    </v-btn>
    <v-btn
      style="min-width: 36px;"
      style="position: relative;"
      small
      class="mb-3 mx-1"
    >
      <v-icon small v-text="`$pqScalarBar`" />
      <div
        style="position: absolute; left: calc(50% + 5px); top: calc(50% + 5px); transform: translate(-50%, -50%);"
        class="text-caption font-weight-black text-lowercase"
      >
        e
      </div>
    </v-btn>
    <v-spacer />
  </v-row>
</v-col>
